<template>
  <el-dialog
    :showClose="false"
    :closeOnPressEscape="false"
    :closeOnClickModal="false"
    @close="closeFn"
    append-to-body
    v-model="dialogVisible"
    title="修改密码"
    width="60%"
  >
    <div>
      <el-form
        label-position="right"
        label-width="100"
        :model="formLabelAlign"
        ref="ruleFormRef"
      >
        <el-form-item
          prop="oldPwd"
          :rules="[
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur',
            },
          ]"
          label="原始密码"
        >
          <el-input
            type="password"
            v-model="formLabelAlign.oldPwd"
            placeholder="原始密码"
          />
        </el-form-item>

        <el-form-item
          prop="newPwd"
          :rules="[
            {
              required: true,
              pattern:
                /^(?=.*[0-9])(?=.*[a-zA-Z!@#$%^&*])[0-9a-zA-Z!@#$%^&*]{8,}$/,
              message:
                '密码必须包含数字、字母和符号任意两种组合，且长度至少为8位',
              trigger: 'blur',
            },
          ]"
          label="新密码"
        >
          <el-input
            type="password"
            v-model="formLabelAlign.newPwd"
            placeholder="新密码"
          />
        </el-form-item>

        <el-form-item
          prop="rePassword"
          :rules="[
            {
              required: true,
              validator: validatePass,
              trigger: 'blur',
            },
          ]"
          label="确认密码"
        >
          <el-input
            type="password"
            v-model="formLabelAlign.rePassword"
            placeholder="确认密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            提交
          </el-button>
          <el-button @click="closeFn">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'userAdd',
}
</script>
<script setup>
import { UserAdminUpdatePwd } from '@/api/api'
import { useAccount } from '@/pinia/modules/account'
import { useApp } from '@/pinia/modules/app'
import { useRouter } from 'vue-router'
// import useCloseTag from '@/hooks/useCloseTag'
// import { statusmark } from '@/pinia/modules/statusmark'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
const router = useRouter()
// const { g_statusmark } = statusmark()
const ruleFormRef = ref()
// const { closeTag } = useCloseTag()

const dialogVisible = ref(false)
// watch(formLabelAlign.parentCityCode, (count, prevCount) => {
//     console.log(count)
//     console.log(prevCount)
// })

// 提供一个 getter 函数

const formLabelAlign = reactive({
  id: 0,
  newPwd: '',
  rePassword: '',
  oldPwd: '',
})

async function addForm(obj) {
  const { userinfo } = useAccount()
  formLabelAlign.id = userinfo.id
}

defineExpose({
  dialogVisible,
  addForm,
})

const validatePass = (rule, value, callback) => {
  if ((formLabelAlign.newPwd || value) && value !== formLabelAlign.newPwd) {
    callback(new Error('与登录密码不一样!'))
  } else {
    callback()
  }
}

// const validatePassPay = (rule, value, callback) => {
//     if ((formLabelAlign.operatepassword || value) && value !== formLabelAlign.loginpassword) {
//         callback(new Error("与支付密码不一样!"))
//     } else {
//         callback()
//     }
// }
const closeFn = async () => {
  const { userinfo } = useAccount()
  if (!userinfo.isChangePwd) {
    ElMessage.error('首次登陆请先修改密码！')

    return false
  }

  dialogVisible.value = false
  // closeTag()
}
const submitForm = async formEl => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await UserAdminUpdatePwd({
        ...formLabelAlign,
      })
      dialogVisible.value = false
      ElMessage.success('修改成功请重新登陆！')

      useApp().clearToken()
      router.push('/login')
    } else {
      console.info(fields)
      ElMessage.error('请查看您填写的参数是否正确！')
    }
  })
}
</script>

<style></style>
